<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="margin-top: 10px">
	<input name="id" hidden/>
    
	<div class="layui-form-item">
      <label class="layui-form-label">油站名称</label>
      <div class="layui-input-block">
        <input readonly="true" type="station" name="station" placeholder="请输入油站名称" autocomplete="off" class="layui-input layui-btn-disabled">
      </div>
    </div>
        
	<div class="layui-form-item">
      <label class="layui-form-label">进入时间</label>
      <div class="layui-input-block">
        <input readonly="true" type="messageAppear" name="messageAppear" placeholder="请输入进入时间" autocomplete="off" class="layui-input layui-btn-disabled">
      </div>
    </div>
	<div class="layui-form-item">
      <label class="layui-form-label">离开时间</label>
      <div class="layui-input-block">
        <input readonly="true" type="messageDisappear" name="messageDisappear" placeholder="请输入离开时间" autocomplete="off" class="layui-input layui-btn-disabled">
      </div>
    </div>
    
	<div class="layui-form-item">
      <label class="layui-form-label">金额</label>
      <div class="layui-input-block">
        <input type="price" name="price" placeholder="请输入金额" autocomplete="off" class="layui-input">
      </div>
    </div>
    
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>

<div class="table_div">
  <div id="searchParam">
    <div class="layui-form-item">
      <div class="layui-input-inline layui-form">
      	<select id="taxorgcodeInput">
		</select>
      </div>
      
      <div class="layui-input-inline">
        <input type="text" id="stationNameInput" class="layui-input"  autocomplete="off" placeholder="请输入加油站名称">
      </div>
      
      <div class="layui-input-inline">
        <input type="text" id="createTimeInput" class="layui-input"  autocomplete="off" placeholder="请输入时间范围">
      </div>

      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search()" id="search">查询</button>
       	<button class="layui-btn" onclick="exportData()">导出</button>
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
    <!-- <button class="layui-btn layui-btn-sm" lay-event="add"  >添加</button>
 	-->
    <button shiro:hasPermission="gas:staytime:delete" class="layui-btn layui-btn-sm" lay-event="batchDeleted" >处理</button>
	<button class="layui-btn layui-btn-sm" lay-event="batchDownload" >图片下载</button>
	<button class="layui-btn layui-btn-sm" lay-event="edit" >修改金额</button>
  </div>
</script>
<script type="text/html" id="tool">
  <! -- <a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >删除</a> -->
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  
  var firstDayOfMonth = firstDayOfMonth();
  var lastDayOfMonth = lastDayOfMonth();
  console.log(firstDayOfMonth);
  console.log(lastDayOfMonth);
  console.log(firstDayOfMonth + " 至 " + lastDayOfMonth);

  $(function() {
	  // 加载机关
      CoreUtil.sendGet("/sys/deptlist",null , function(res) {
			if (res.code == '0') {
				var value = res.data[0];
				var opt = "<option value = ''>请选择所属机关</option>";
				for (var i in value) {
					opt += '<option value = "' + value[i].id + '">'
							+ value[i].name + '</option>';
				}
				
				$("#taxorgcodeInput").html(opt);
				form.render('select'); //需要渲染一下
			} else {
				layer.msg(res.msg);
				return false;
			}
		}, false, false);
		
  });
  
  $("#createTimeInput").val(firstDayOfMonth + " 至 " + lastDayOfMonth);
  
  layui.use(['table', 'layer', 'laydate'], function () {
	
	  laydate.render({
			elem : '#createTimeInput',
			type : 'date',
			range : '至',
			done : function(value, date, endDate) {
				if (value != null && value != undefined
						&& value != "") {
					startTime = value.split("至")[0];
					endTime = value.split("至")[1];
					
				} else {
					startTime = null;
					endTime = null;
				}

			}
		});
	  
    	//加载table
	    tableIns1 = table.render({
	      elem: '#showTable'
	      , contentType: 'application/json'
	      , headers: {"authorization": token}
	      , page: true //开启分页
	      , url: '/gas/staytime/list' //数据接口
	      , where: {
	    	  createTimeStart : $("#createTimeInput").val().split('至')[0].replace(/\s+/g, ""),
	      	  createTimeEnd : $("#createTimeInput").val().split('至')[1].replace(/\s+/g, "")
	      } // 初始化时的过滤条件
	      , method: 'POST'
	      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
	        return {
	          "code": res.code, //解析接口状态
	          "msg": res.msg, //解析提示文本
	          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
	          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
	        }
	      }
	      , cols: [
	        [
	          {type: 'checkbox', fixed: 'left'},
	          {field: 'id', title: '主键', sort: true, hide: true, width: 130},
	          {field: 'fromTopic', title: 'Topic', hide: true, sort: true, width: 227},
	          {field: 'station', title: '油站名称', sort: true, width: 297},
	          
	          {field: 'taxpayerCode', title: '纳税人识别号', sort: true, width: 297},
	          
	          {field: 'deptName', title: '所属机关', sort: true, width: 297},
	          
	          {field: 'messageMsegtype', title: '油机编号', hide: true,sort: true, width: 122},
	          {field: 'messageChannel', title: '通道', hide: true,sort: true, width: 115},
	          {field: 'messageAreanumber', title: '区域编号', sort: true, hide: true,width: 102},
	          {field: 'messageAreaname', title: '区域名称', hide: true,sort: true, width: 132},
	          {field: 'messageRuleid', title: '车辆类型ID', sort: true, hide: true,width: 145},
	          {field: 'price', title: '金额（元）', sort: true, width: 145},
	          
	          {field: 'oils', title: '油品', sort: true, width: 105 },

	          /* {field: 'messageRulename', title: '车辆类型名称', sort: true, width: 145}, */
	          {field: 'messageProb', hide: true,title: '置信度', sort: true, width: 180},
	          {field: 'messageAppear', title: '进入时间', sort: true, width: 200},
	          {field: 'messageDisappear', title: '离开时间', sort: true, width: 200},
	          {field: 'field5', title: '摄像头ID', sort: true, width: 110},
	          
	          {field: 'messageLabel', title: '标注识别编号', sort: true, hide: true,width: 300},
	          {field: 'messagePlatennumber', title: '车牌号', hide: true,sort: true, width: 200},
	          {field: 'image', title: '图片', width: 170, fixed: 'right', templet: function(d) {
				  var image1 = CoreUtil.isEmpty(d.image1) ? d.image : d.image1;
	        	  if(!CoreUtil.isEmpty(d.image)){
						return '<a href="javascript:;" data-src="'+d.image+'" class="layui-table-link" onclick="showImage(this)">出区图片</a>'
						+'<span style="margin-right: 7px;"> </span>'
						+'<a href="javascript:;" data-src="' +image1+ '" class="layui-table-link" onclick="showImage(this)">入区图片</a>';
					
					}
				  }
			   }
	          
	          // {width: 120, toolbar: "#tool", title: '操作'}
	        ]
	      ]
	      , toolbar: '#toolbar'
	    });


    	//表头工具
	    table.on('toolbar(showTable)', function(obj){
	      switch(obj.event){
	        
	        case 'batchDownload':
	          var checkStatus = table.checkStatus(obj.config.id);
	          var data = checkStatus.data;
	          if(data.length==0){
	            layer.msg("请选择要批量下载处理的列");
	          }else {
	            var ids = [];
	            $(data).each(function (index,item) {
	            	var _id = item.id;
	            	var _messageDisappear = item.messageDisappear;
	            	var map = {
	            		id : _id,
	            		messageDisappear : _messageDisappear
	    			}
	            	ids.push(map);
	            	//ids.push(item.id);
	            });
	            tipDownload(ids);
	          }
	          break;
	      
	        case 'batchDeleted':
	          var checkStatus = table.checkStatus(obj.config.id);
	          var data = checkStatus.data;
	          if(data.length==0){
	            layer.msg("请选择要批量处理的列");
	          }else {
	            var ids = [];
	            $(data).each(function (index,item) {
	            	var _id = item.id;
	            	var _messageDisappear = item.messageDisappear;
	            	var map = {
	            		id : _id,
	            		messageDisappear : _messageDisappear
	    			}
	            	ids.push(map);
	            	// ids.push(item.id);
	            });
	            tipDialog(ids);
	          }
	          break;
	        case 'edit':
		      var checkStatus = table.checkStatus(obj.config.id);
		      var data = checkStatus.data;
		      if(data.length==0){
		    	  layer.msg("请选择要修改处理的列!");
			  } else if(data.length==1) {
				  $(".table_div").hide();
		          $(".operation").show();
		          $(".title").html("修改");
		          $(".operation input[name=id]").val(data[0].id);
		          $(".operation input[name=price]").val(data[0].price);
		          $(".operation input[name=station]").val(data[0].station);
		          
		          $(".operation input[name=messageAppear]").val(data[0].messageAppear);
		          $(".operation input[name=messageDisappear]").val(data[0].messageDisappear);  
		      } else {
		    	  layer.msg("请选择一列！");
		      }
	          break;
	      };
	    });
    	//列操作
	    table.on('tool(showTable)',function (obj) {
	      var data = obj.data;
	      switch (obj.event) {
	        case 'del':
	          var ids=[];
	          ids.push(data.id);
	          tipDialog(ids);
	          break;
	        case 'edit':
	          
	          break;
	      }
	    });
	
    	//删除
	    var tipDialog=function (ids) {
	      layer.open({
	        content: "确定要处理删除么?",
	        yes: function(index, layero){
	          layer.close(index); //如果设定了yes回调，需进行手工关闭
	          CoreUtil.sendPost("/gas/staytime/delete",ids,function (res) {
	            layer.msg(res.msg, {time:1000},function () {
	              // search();
	            });
	          });
	        }
	      });
	    };
	    
		// 下载
		var tipDownload = function (ids) {
	      layer.open({
		        content: "确定要下载么?",
		        yes: function(index, layero){
		          layer.close(index); //如果设定了yes回调，需进行手工关闭
		          CoreUtil.sendPost("/gas/staytime/download",ids,function (res) {
		              // search();
		              if(res.code == "0"){
		            	  layer.msg("下载成功！");
		            	  window.open(res.data,'_blank');
		              }else{
		            	  layer.msg(res.data);
		              }
		          });
		        }
		      });
		};
		
		
	    //返回
	    $("#btn_cancel").click(function() {
	      $(".table_div").show();
	      $(".operation").hide();
	      return false;
	    });

	    //监听保存
	    form.on('submit(submit)', function(data){
	      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
	        
	      }else {
	        CoreUtil.sendPost("/gas/staytime/edit",data.field,function (res) {
	        	$(".table_div").show();
	        	$(".operation").hide();
	        	// search();
	        	if(res.code == "0"){
	        		layer.msg("修改成功！");
	        	}else{
	        		layer.msg(res.msg);
	        	}
	        	
	        });
	      }
	
	      return false;
	    });
	    
	    
	    //导出
	    $('#export').on('click', function () {
	      
	    	var createTimeInput = $("#createTimeInput").val();
			var arr = createTimeInput.split('至');
			
	    	//原先分页limit
	      	var exportParams = {
	        	limit: -1,
	        	key: $("#key").val(),
	        	createTimeStart: arr[0].replace(/\s+/g, ""),
	        	createTimeEnd: arr[1].replace(/\s+/g, ""),
	        	stationName: $("#stationNameInput").val(),
	        	deptId : $("#taxorgcodeInput").val(),
	      	};
	      
	      	CoreUtil.sendPost("/gas/staytime/list", exportParams, function (res) {
	        	//初始化渲染数据
		        if (res.data != null && res.data.records != null) {
		        	table.exportFile(tableIns1.config.id, res.data.records, 'xls');
		        }
	      	});
	      });
	  
	  });
	  
	  //执行查询
	  function search() {
		  var createTimeInput = $("#createTimeInput").val();		  
		  var arr = createTimeInput.split('至');
		  //这里以搜索为例
		  tableIns1.reload({
		      where: { //设定异步数据接口的额外参数，任意设
		    	 createTimeStart : arr[0].replace(/\s+/g, ""),
				 createTimeEnd : arr[1].replace(/\s+/g, ""),
				 stationName: $("#stationNameInput").val(),
				 deptId : $("#taxorgcodeInput").val(),
		      }
		      , page: {
		        curr: 1 //重新从第 1 页开始
		      }
		  });
	  };
  
  
	  function showImage(obj) {
		  var src = $(obj).attr('data-src'); // 获取图片地址
		  layer.open({
		    type: 1,
		    title: false,
		    closeBtn: 0,
		    area: '500px',
		    skin: 'layui-layer-nobg', // 没有背景色的弹层
		    shadeClose: true,
		    content: '<img src="' + src + '" alt="图片" style="margin: auto; max-width: 100%; max-height: 100%">'
		  });
	   };
	   
  	function firstDayOfMonth() {
  		const currentDate = new Date();
  		const year = currentDate.getFullYear();//获取当前年
  		const month = String(currentDate.getMonth() + 1).padStart(2, "0");//获取当前月
  		const firstDay = "01";//日
  		return `${year}-${month}-${firstDay}`;
    };
	
    function lastDayOfMonth() {
    	// 获取当前日期
    	const currentDate = new Date();
    	// 获取当前年份
    	let year = currentDate.getFullYear();
    	// 获取下个月的月份，使用 padStart 在月份小于 10 时在前面补零
    	let month = String(currentDate.getMonth() + 2).padStart(2, "0");
    	// 如果月份为 '13'，说明当前是12月，需要更新年份并将月份设置为 '01'
    	if (month === '13') {
    	    year = year + 1;
    	    month = '01';
    	}
    	 
   	  	// 设置每个月的第一天为 '01'
   	  	let firstDay = "01";
   	  	// 构建下个月的第一天的日期字符串，格式为 'YYYY-MM-DD'
   	  	const firstDayOfNextMonth = `${year}-${month}-${firstDay}`;
   	  	// 计算当前月的最后一天，通过减去一天的毫秒数来得到
   	  	const lastDayOfMonth = new Date(new Date(firstDayOfNextMonth).getTime() - 86400000);
   	  	// 将最后一天的日期转换为 ISO 格式，并提取日期部分
   	  	return lastDayOfMonth.toISOString().split("T")[0];
	}
    
    
  	//导出
    function exportData(){
      var createTimeInput = $("#createTimeInput").val();		  
	  var arr = createTimeInput.split('至');
	  
	  var exportParams = {
        	key: $("#key").val(),
        	createTimeStart: arr[0].replace(/\s+/g, ""),
        	createTimeEnd: arr[1].replace(/\s+/g, ""),
        	stationName: $("#stationNameInput").val(),
        	deptId : $("#taxorgcodeInput").val(),
	  };
  	  
  	  CoreUtil.sendPost("/gas/staytime/exportData",exportParams,function (res) {
  		  if(res.code == 0){
  			layer.msg(res.data);
  			return false;
  			// var file = res.data[2];
  			// window.open(file,'_blank');
  		  }else{
  			layer.msg(res.msg);
  			return false;
  		  }
            
  	  });
    }
    
    
</script>